import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/route_manager.dart';
import 'package:shudu/page/history_page.dart';
import 'package:shudu/page/how_page.dart';
import 'package:shudu/page/play_page.dart';
import 'package:shudu/page/set_page.dart';
import 'package:shudu/page/success_page.dart';
import 'package:shudu/utils/global.dart';
import 'package:shudu/utils/image_utils.dart';
import 'package:shudu/widget/sudoku/generator.dart';

class EnterPage extends StatefulWidget {
  const EnterPage({Key? key}) : super(key: key);

  @override
  State<EnterPage> createState() => _EnterPageState();
}

class _EnterPageState extends State<EnterPage> {
  int selIndex = 0;

  final List levels = [
    {"img": "level_jiandan", "name": "简单", "level": LEVEL.EASY},
    {"img": "level_putong", "name": "普通", "level": LEVEL.ORIDINARY},
    {"img": "level_kunnan", "name": "困难", "level": LEVEL.HARD},
    {"img": "level_zhuanjia", "name": "专家", "level": LEVEL.EXPERT},
    {"img": "level_dashi", "name": "大师", "level": LEVEL.MASTER},
    {"img": "level_zongshi", "name": "宗师", "level": LEVEL.MASTER_P},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            decoration: const BoxDecoration(
                color: mainColor,
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(20),
                    bottomRight: Radius.circular(20))),
            child: Stack(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  child: loadAssetImage("mask"),
                ),
                Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          InkWell(
                            onTap: () {
                              Get.to(() => HowPage());
                            },
                            child: Padding(
                              padding: const EdgeInsets.only(top: 6.5, left: 5),
                              child: loadAssetImage("icon_how", width: 24),
                            ),
                          ),
                          InkWell(
                            onTap: () {
                              Get.to(() => SetPage());
                            },
                            child: Padding(
                              padding:
                                  const EdgeInsets.only(right: 5, top: 6.5),
                              child: loadAssetImage("icon_set", width: 24),
                            ),
                          )
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    const Text(
                      "SUDOKU",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 30,
                          fontWeight: FontWeight.bold),
                    ),
                    const Text(
                      "数独大师",
                      style: TextStyle(
                          color: Colors.white, fontSize: 17),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    levelWidget()
                  ],
                )
              ],
            ),
          ),
          const SizedBox(
            height: 50,
          ),
          GestureDetector(
            onTap: () {
              Map map = levels[selIndex];
              // Get.to(() => SuccessPage());

              Get.to(() => PlayPage(map["level"]));
            },
            child: Container(
              height: 52,
              width: 264,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: mainColor, borderRadius: BorderRadius.circular(12)),
              child: const Text(
                "开始游戏",
                style: TextStyle(
                    color: Colors.white, fontSize: 16),
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          InkWell(
            onTap: () {
              Get.to(() => HistoryPage());
            },
            child: Container(
              alignment: Alignment.center,
              height: 50,
              child: const Text(
                "历史记录",
                style: TextStyle(
                    color: Color.fromRGBO(49, 124, 245, 1),
                    fontSize: 16),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget levelWidget() {
    return SizedBox(
      height: 320,
      child: Swiper(
        loop: false,
        scrollDirection: Axis.horizontal,
        itemCount: levels.length,
        itemBuilder: (BuildContext context, int index) {
          Map map = levels[index];
          return Opacity(
            opacity: (index == selIndex) ? 1 : 0.3,
            child: Column(
              children: [
                loadAssetImage(map["img"]),
                Text(
                  map["name"],
                  style: const TextStyle(
                      color: Colors.white, fontSize: 18),
                ),
                const SizedBox(
                  height: 20,
                )
              ],
            ),
          );
        },
        onIndexChanged: (index) {
          setState(() {
            selIndex = index;
          });
        },
        pagination: SwiperPagination(
            alignment: Alignment.bottomCenter,
            margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),
            builder: DotSwiperPaginationBuilder(
              size: 6,
              activeColor: Colors.white,
              color: Colors.white.withOpacity(0.3),
            )),
        viewportFraction: 0.6,
        scale: 1, // 两张图片之间的间隔
      ),
    );
  }
}
